<template>
  <div class="app-layout layout app-layout-has-sider">
    <side-menu :menu-list="menus" :collapsed="collapsed"></side-menu>

    <div
      class="app-layout layout-inside"
      :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
      <global-header
        :collapsed="collapsed"
        @toggle="toggle"
      />
      <div class="layout-content" :style="{ height: '100%', margin: '15px 15px 0', paddingTop: fixedHeader ? '64px' : '0' }">
        <router-view/>
      </div>

      <div class="layout-footer">
        <global-footer />
      </div>
    </div>
  </div>
</template>

<script>
import { triggerWindowResizeEvent } from '@/utils/util'
import { mapState, mapActions } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin'

import SideMenu from '@/components/SideMenu'
import GlobalHeader from '@/components/GlobalHeader'
import GlobalFooter from '@/components/GlobalFooter'

export default {
  name: 'BasicLayout',
  mixins: [mixin, mixinDevice],
  components: {
    SideMenu,
    GlobalHeader,
    GlobalFooter
  },
  data() {
    return {
      collapsed: false,
      menus: []
    }
  },
  created() {
    const menus = this.mainMenu.find(item => item.path === '/').children
    this.menus = this.getMenuByRouter(menus)
  },
  computed: {
    ...mapState({
      // 动态主路由
      mainMenu: state => state.permission.addRouters
    }),
    contentPaddingLeft () {
      if (!this.fixSidebar || this.isMobile()) {
        return '0'
      }
      if (this.sidebarOpened) {
        return '220px'
      }
      return '80px'
    }
  },
  methods: {
    ...mapActions(['setSidebar']),
    toggle () {
      this.collapsed = !this.collapsed
      this.setSidebar(!this.collapsed)
      triggerWindowResizeEvent()
    },
    getMenuByRouter (list) {
      let res = []
      list.forEach(item => {
        if (!item.meta || (item.meta && !item.meta.hideInMenu)) {
          let obj = {
            icon: (item.meta && item.meta.icon) || '',
            name: item.name,
            path: item.path,
            meta: item.meta
          }
          if ((item.children && item.children.length !== 0 || (item.meta && item.meta.showAlways))) {
            obj.children = this.getMenuByRouter(item.children)
          }
          if (item.meta && item.meta.href) obj.href = item.meta.href
          res.push(obj)
        }
      })
      return res
    }
  }
}
</script>